import { Component, ElementRef, HostBinding, OnDestroy } from '@angular/core';
import { IHeaderParams } from '@ag-grid-enterprise/all-modules';
import { IHeaderAngularComp } from '@ag-grid-community/angular';

interface MyParams extends IHeaderParams {
  menuIcon: string;
}

@Component({
  template: `
    <div class="showHidden">
      <div class="showHidden-text">{{params.displayName}}</div>
      <div class="showHidden-icon" (click)="openShowHidden()">
        <i *ngIf="!showHidden" apes-icon apesType="eye-invisible"></i>
        <i *ngIf="showHidden" apes-icon apesType="eye"></i>
      </div>
    </div>
  `,
  styles: [`
    .showHidden {
      display: flex;
      overflow: hidden;
      justify-content: space-between;
    }

    .showHidden-icon {
      cursor: pointer;
    }
  `],
})
export class ShowHiddenHeaderComponent implements OnDestroy, IHeaderAngularComp {
  public params: MyParams;
  public showHidden: boolean = false;

  private elementRef: ElementRef;
  @HostBinding('style.text-align') align: string;
  @HostBinding('style.width') width: string;

  constructor(elementRef: ElementRef) {
    this.elementRef = elementRef;
    this.align = 'left';
    this.width = '100%';
  }

  agInit(params: MyParams): void {
    this.params = params;
    if(this.params.column['colDef'].showHidden == 'true') {
      this.params.column['colDef'].showHidden = true;
    }else {
      this.params.column['colDef'].showHidden = false;
    }
    this.showHidden = this.params.column['colDef'].showHidden;

    // console.log('show',this.params.column['colDef'].showHidden);
  }

  ngOnDestroy() {
  }

  openShowHidden() {
    this.showHidden = !this.showHidden;
    this.params.column['colDef'].showHidden = this.showHidden;
  }

  refresh(params): boolean {
    return true;
  }
}
